<template>
  <div>
    <div
      class="preview"
      :style="{ backgroundColor: hex, color: matchForeColor(hex) }"
    >
      {{ target }}&nbsp;{{ hex }}
    </div>
    <div>
      <el-form size="small">
        <el-form-item label="R">
          <el-slider v-model="red" :min="0" :max="255" show-input />
        </el-form-item>
        <el-form-item label="G">
          <el-slider v-model="green" :min="0" :max="255" show-input />
        </el-form-item>
        <el-form-item label="B">
          <el-slider v-model="blue" :min="0" :max="255" show-input />
        </el-form-item>
      </el-form>
      <!-- <el-row>
        <el-col :span="8" style="text-align: center">
          <span>红：</span>
          <el-input-number
            v-model="red"
            size="small"
            :min="0"
            :max="255"
            :step="16"
          />
        </el-col>
        <el-col :span="8" style="text-align: center">
          <span>绿：</span>
          <el-input-number
            v-model="green"
            size="small"
            :min="0"
            :max="255"
            :step="16"
          />
        </el-col>
        <el-col :span="8" style="text-align: center">
          <span>蓝：</span>
          <el-input-number
            v-model="blue"
            size="small"
            :min="0"
            :max="255"
            :step="16"
          />
        </el-col>
      </el-row> -->
      <el-divider />
    </div>
    <el-scrollbar max-height="300px">
      <el-button
        v-for="item in colorListNew"
        size="small"
        circle
        :key="item.name"
        :color="item.value"
        @click="handleSelectColor(item.value)"
        :class="[
          'color-button',
          hex == item.value ? 'color-button-selected' : '',
        ]"
      >
      </el-button>
    </el-scrollbar>
    <div style="text-align: center">
      <el-divider />
      <el-button type="primary" @click="handleUpdate">确定</el-button>
      <!-- <el-button v-if="currentColor != defaultColor" size="small" text link @click="setDefaultColor">默认</el-button> -->
      <el-button type="primary" link @click="$emit('close')">取消</el-button>
    </div>
  </div>
</template>

<script>
import { mapState } from "pinia";
import useCommonStore from "@/store/common";
// import colorList from "./colorList.json";
import colorListNew from "./colorListNew.json";
import matchForeColor from "@/utils/matchForeColor.js";
import setSeatAttrib from "@/views/SeatStatus/common/setSeatAttrib.js";
export default {
  props: ["target", "seatStatus"],
  name: "colorSettingView",
  data() {
    return {
      colorListNew,
      red: 0,
      green: 0,
      blue: 0,
      defaultColor: "",
      currentColor: "",
    };
  },
  computed: {
    ...mapState(useCommonStore, ["darkMode"]),
    hex() {
      return this.colorRGB2Hex(
        this.red,
        this.green,
        this.blue
      ).toLocaleUpperCase();
    },
  },
  methods: {
    matchForeColor,
    handleSelectColor(hex) {
      let rgb = this.colorHex2RGB(hex);
      // this.hex = hex;
      this.red = rgb.red;
      this.green = rgb.green;
      this.blue = rgb.blue;
    },
    colorRGB2Hex(r, g, b) {
      let hex =
        "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
      return hex;
    },
    colorHex2RGB(hex) {
      return {
        red: parseInt("0x" + hex.slice(1, 3)),
        green: parseInt("0x" + hex.slice(3, 5)),
        blue: parseInt("0x" + hex.slice(5, 7)),
      };
    },
    handleUpdate() {
      setSeatAttrib(
        this.target,
        this.darkMode ? "defaultColor" : "color",
        this.hex.replace("#", "%23")
      )
        .then((response) => {
          console.log(response);
          this.$notify.success("已保存颜色设置");
          this.$emit("updated");
          this.$emit("close");
        })
        .catch((error) => {
          console.error(error);
          this.$notify.danger(JSON.stringify(error, null, 2));
          this.$emit("close");
        });

      return null;
      // let uri =
      //   "api/seat_status_tma_set_color.php?seat=" +
      //   this.target +
      //   "&color=" +
      //   this.hex.slice(1) +
      //   "&dark=" +
      //   (this.darkMode ? "1" : "0");
      // console.log(uri);
      // this.axios
      //   .get(uri)
      //   .then((response) => {
      //     console.log(response);
      //     this.$notify.success("已保存颜色设置");
      //     this.$emit("updated");
      //     this.$emit("close");
      //   })
      //   .catch((error) => {
      //     console.error(error);
      //     this.$notify.danger(JSON.stringify(error, null, 2));
      //     this.$emit("close");
      //   });
    },
    loadInitialColor() {
      for (let i = 0; i < this.seatStatus.length; i++) {
        if (this.seatStatus[i].seatName == this.target) {
          if (this.darkMode) {
            this.currentColor = this.seatStatus[i].defaultColor;
          } else {
            this.seatStatus[i].color;
          }
          this.setRGB(this.colorHex2RGB(this.currentColor));
          // this.defaultColor = this.seatStatus[i].defaultColor;
        }
      }
    },
    setRGB(rgb) {
      this.red = rgb.red;
      this.green = rgb.green;
      this.blue = rgb.blue;
    },
    setDefaultColor() {
      this.setRGB(this.colorHex2RGB(this.defaultColor));
      // this.handleUpdate();
    },
  },
  mounted() {
    this.loadInitialColor();
  },
};
</script>

<style scoped>
.preview {
  width: 100%;
  height: 24px;
  margin-bottom: 24px;
  border-radius: 24px;
  text-align: center;
  font-size: 10px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Consolas", monospace;
}

.color-button {
  margin: 4px;
  transition: all 0.3 ease-in-out;
}

.color-button:hover {
  transform: scale(1.3);
}

.color-button-selected {
  transform: scale(1.3);
  border: 2px solid var(--el-text-color-primary);
}
</style>
